<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" href="css/bootstraplan.css">
	
	<style type="text/css">
		#mydiv{
			position:relative;
		}
		#message{
			position:absolute;
			top:20px;
			left:180px;
		}
		#total{
			position:relative;
		}
		#kinds{
			position:absolute;
			top:32px;
			left:250px;
		}
		#everyone{
			position:absolute;
			top:32px;
			left:330px;
		}
		#time{
			position:absolute;
			top:32px;
			left:415px;
		}
		.showdeal{
			position:relative;
			height:110px;
			
			margin-left:20px;
			margin-right:20px;
			margin-top:5px;
		}
		.money{
			width:56px;
			height:60px;
			background-position:-502px -56px;
			background-image:url(img/all.png);
			position:absolute;
			top:5px;
			left:15px;
		}
		.dealinfo{
			position:absolute;
			top:5px;
			left:80px;
		}
	</style>
</head>
<body style="background-color:#f3f1ec">
	<div class="navbar" >
	  <div class="navbar-inner" style="height:60px">
		<a class="brand" href="#"><img src="img/logo-topleft.png" alt="" /></a>
		<a href="" class="btn btn-info" style="margin-top:12px;margin-left:10px">添加日程</a>
		<a href="" class="btn btn-info" style="margin-top:12px">添加联系人</a>
		
		<div class="btn-group pull-right">
            <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
               <i class="icon-user"></i>${sessionScope.curr_user.username }
              <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
              <li><a href="#"><i class="icon-cog"></i>　密码设置</a></li>
              <li class="divider"></li>
              <li><a href="#"><i class="icon-off"></i>　安全退出</a></li>
            </ul>
          </div>
		</div>
	</div>
	<div class="row-fluid">
		<div class="span3" style="height:400px">
				<div class="wall" style="padding:8px 0;">
					<ul class="nav nav-list" >
						<li class="nav-header" style="padding-top:0px">Welcome!</li>
						<li class="divider"><br></li>
						<li ><a href="home.action"><i class="icon-white icon-home"></i>最新动态</a></li>
						<li><a href="contactlist.action"><i class="icon-user"></i>联系人</a></li>
						<li><a href="task/toCalendar.action"><i class="icon-leaf"></i>日程</a></li>
						<li class="active"><a href="deal.action"><i class="icon-gift"></i>交易</a></li>
						<li><a href="emails.action"><i class="icon-gift"></i>群发邮件</a></li>
					</ul>
				</div>
		</div>
		<c:if test="${empty dealByCategoryList}">
			<div class="span7" style="background-color:#fff;height:600px;border:1px solid #ccc;border-radius:2px;width:700px;" id="">
			<div id="container">
			<div class="wall" style="border-bottom:1px solid #ccc;">
				<div style="background-color:#f0f5f8;height:30px;padding-top:17px;padding-left:15px;">
					<strong style="margin-left:30px;font-size:16px;">交易</strong>
					
				</div>
				
			</div>
			<div style="padding:30px;" id="total">
				<table>
					<tr>
						<td>
							<a href="newDeal.action" class="btn" style="border-radius:15px;padding:3px;width:100px;"><img src="img/add.png" alt="" style="margin-bottom:3px"/>添加记录</a>
						</td>
						<td>
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;显示交易在
			
						</td>
					</tr>
					
				</table>
				<div class="btn-group" id="kinds">
					<a class="btn dropdown-toggle btn-mini btn-info" data-toggle="dropdown" href="#">
					   所有分类
					  <span class="caret"></span>
					</a>
					<ul class="dropdown-menu">
					  <li><a href="deal.action"><i class="icon-cog"></i>所有分类</a></li>
					  <c:forEach items="${categoryList}" var="categ">
					  	<li><a href="findDealsByCategory.action?id=${categ.id}"><i class="icon-home"></i>${categ.type}</a></li>
					  </c:forEach>
					
					</ul>
				</div>
				<div class="btn-group" id="everyone">
					<a class="btn dropdown-toggle btn-mini btn-success" data-toggle="dropdown" href="#">
					   所有人
					  <span class="caret"></span>
					</a>
					<ul class="dropdown-menu">
					  <li><a href="#"><i class="icon-gift"></i>所有人</a></li>
					  
					  <li><a href="#"><i class="icon-home"></i>只有我</a></li>
					</ul>
				</div>
				
			</div>
			
				<span style="margin-left:40px;color:#056b84;">此分类下还没有交易哦!</span>
					
				
			</div>
			
		</div>
		
		</div>
		</c:if>
		<c:if test="${not empty dealByCategoryList}">
			<div class="span7" style="background-color:#fff;height:800px;border:1px solid #ccc;border-radius:2px;" id="">
			<div id="container">
			<div class="wall" style="border-bottom:1px solid #ccc;">
				<div style="background-color:#f0f5f8;height:30px;padding-top:17px;padding-left:15px;">
					<strong style="margin-left:30px;font-size:16px;">交易</strong>
					
				</div>
				
			</div>
			<div style="padding:30px;" id="total">
				<table>
					<tr>
						<td>
							<a href="newDeal.action" class="btn" style="border-radius:15px;padding:3px;width:100px;"><img src="img/add.png" alt="" style="margin-bottom:3px"/>添加记录</a>
						</td>
						<td>
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;显示交易在
			
						</td>
					</tr>
					
				</table>
				<div class="btn-group" id="kinds">
					<a class="btn dropdown-toggle btn-mini btn-info" data-toggle="dropdown" href="#">
					   所有分类
					  <span class="caret"></span>
					</a>
					<ul class="dropdown-menu">
					  <li><a href="deal.action"><i class="icon-cog"></i>所有分类</a></li>
					  <c:forEach items="${categoryList}" var="categ">
					  	<li><a href="findDealsByCategory.action?id=${categ.id}"><i class="icon-home"></i>${categ.type}</a></li>
					  </c:forEach>
					
					</ul>
				</div>
				<div class="btn-group" id="everyone">
					<a class="btn dropdown-toggle btn-mini btn-success" data-toggle="dropdown" href="#">
					   所有人
					  <span class="caret"></span>
					</a>
					<ul class="dropdown-menu">
					  <li><a href="findDealsByCategory.action?q=all"><i class="icon-gift"></i>所有人</a></li>
					  
					  <li><a href="findDealsByCategory.action?q=me"><i class="icon-home"></i>只有我</a></li>
					</ul>
				</div>
				
			</div>
			<span style="margin-left:30px;"><strong>跟踪了${dealList.size()}个交易</strong>—${dealByCategoryList.size()}&nbsp;worth&nbsp;￥${money}</span>
			<div>
				<div style="border-bottom:2px solid #000;margin-left:20px;margin-right:20px;"></div>
				<c:forEach items="${dealByCategoryList }" var="deal">
				<div class="showdeal" style="border-bottom:1px solid #ccc;">
					<div class="money"></div>
					<div class="dealinfo">
						<a href="todealById.action?id=${deal.id }" style="font-size:18px;">${deal.name }</a>&nbsp;&nbsp;<span style="font-size:13px;color:#666;">with <a href="#">
							${deal.contactList[0].username}
						</a></span>
						<div>${deal.desc }</div>
						<div>￥${deal.money }</div>
						<input type="hidden" value="${deal.category.color}" class="color">
						<div style="border:1px solid #eee;color:#fff;background-color:#ccc;font-size:11px;padding:0px 3px;width:50px;" class="categ">${deal.category.type }</div>
					</div>
				</div>
				</c:forEach>	
				
					
				
			</div>
			
		</div>
		
		</div>
			<div class="span2">
				<div class="box" style="border:1px solid #ccc">
				<div class="head" style="padding-left:10px;padding-top:5px;border-bottom:1px solid #ccc;padding-left:15px "><strong>删除类别</strong></div>
				<address style="padding-top:10px;padding-left:6px">
					你可以<a href="editCategorys.action">修改/删除类别</a>
				</address>
				
			</div>
		</div>
		</c:if>
	
	</div>
			
			
		
			
			
			
			
			
			
			
			
			
			
			
			
	
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>	
	<script type="text/javascript">
		$(document).ready(function(){
			$(".categ").each(function(i){
				var color = $(this).prev().val();
				
			   $(this).css("background-color","#" + color); 
			   
			 }); 
		});
	</script>
</body>
</html>